<template>
    <div class="setting_item_container" @click="clickItem">
        <span class="item_title">{{ itemInfo.title }}</span>
    </div>

</template>

<script setup>
    import { useRouter } from 'vue-router';
    import { useUserInfoStore } from '@/stores';
    import { useAnswerListStore } from '@/stores';
    let props = defineProps(["itemInfo"])
    const roouter = useRouter()
    const userInfoStore = useUserInfoStore()
    const answerListStore = useAnswerListStore()
    function clickItem() {
        if (props.itemInfo.id === 4) {
            roouter.replace("/login")
            userInfoStore.account = ""
            answerListStore.answerList.splice(0, answerListStore.answerList.length)
        } else {
            alert("功能尚未开放，敬请期待")
        }
    }
</script>

<style scoped>
    .setting_item_container {
        margin-top: 8px;
        height: 50px;
        width: 100%;
        font-size: 32px;
        border-color: gray;
        border-width: 2px;
        border-style: solid;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .item_title {
        font-size: 16px;
    }
</style>